<template>
  <view class="detail-datas">
    <Paglist
      v-model="dataList"
      :is-init-api="false"
      :parame="parame"
      @register="register"
      :scroll-top-bottom="260"
    >
      <view class="list-box">
        <template v-for="(item, index) in dataList" :key="index">
          <DetaiDataItem
            :avatar-image="item.avatar"
            :name="item.userName"
            :date-time-str="item.updateTime"
            @detail="handleDetail(item)"
          ></DetaiDataItem>
        </template>
      </view>
    </Paglist>
    <TButtonGroup
      :styles="{
        width: '100%',
        height: '128rpx',
        backgroundColor: '#fff',
        boxShadow: '0px 2px 12px 0px rgba(150, 151, 153, 0.16)',
        padding: '20rpx 32rpx',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }"
    >
      <TButton
        :text="taskLoading ? '正在导出中...' : '导出所有表单'"
        type="primary"
        :custom-style="{ width: '686rpx', height: '88rpx', borderRadius: '44rpx' }"
        :disabled="taskLoading"
        @click="exportAllForm"
      ></TButton>
    </TButtonGroup>
  </view>
</template>
<script setup lang="ts">
  import type { IFormFillRecordList, IFormFillRecordListQuery } from '@/api/serviceForm/types';
  import DetaiDataItem from './DetaiDataItem/index.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { navigateTo, onLoad } from '@/router';
  import { computed, onMounted, provide, reactive, ref } from 'vue';
  import { RecordTypeEnum } from '@/enums/serviceFormEnum';
  import { useConList } from '@/components/Paglist/useConList';
  import { asyncExportExcel, sysFillinRecordList } from '@/api/serviceForm';
  import Paglist from '@/components/Paglist/index.vue';
  import { useAdminStoreWithOut } from '@/store/modules/admin'
  import { storeToRefs } from 'pinia';

  const props = defineProps({
    serviceTicketFormId: {
      type: Number,
      default: 0,
    },
  });
  const parame = reactive<IFormFillRecordListQuery>({
    current: 1,
    size: 10,
    recordType: RecordTypeEnum.DETAIL,
    userName: '',
  });
  const [register, { refresh }] = useConList();
  provide('api', sysFillinRecordList);

  const dataList = ref<IFormFillRecordList[]>([]);

  onMounted(() => {
    parame.serviceTicketFormId = props.serviceTicketFormId;
    refresh();
  });

  const handleSearch = (keyWord: string) => {
    dataList.value = [];
    parame.userName = keyWord;
    refresh();
  };
  const handleDetail = (item: IFormFillRecordList) => {
    navigateTo({
      name: 'collectRecordDetails',
      options: {
        id: item.id,
      },
    });
  };

  defineExpose({
    handleSearch,
  });

  const useAdmin = useAdminStoreWithOut();
  const { taskQueuesList, taskLoading } = storeToRefs(useAdmin);
  const exportAllForm = () => {
    if(!parame.serviceTicketFormId) return
    asyncExportExcel(parame.serviceTicketFormId).then((res) => {
      useAdmin.setTaskQueuesList([res, ...taskQueuesList.value])
    })
  };
</script>
<style scoped lang="scss">
  .detail-datas {
    .list-box {
      display: flex;
      padding: 32rpx;
      flex-direction: column;
      gap: 24rpx;
    }
  }
</style>
